<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      ::highlight(tel-highlight) {
          color: red;
      }
      .tel-highlight{
          color: red;
      }
      ul {
          columns: 2 50px;
      }
  </style>
</head>
<body>
<p id="p">如有疑问可以WX加13208033621或者15812345678咨询。</p>
<ul>
  <li>重庆市</li>
  <li>哈尔滨市</li>
  <li>长春市</li>
  <li>兰州市</li>
  <li>北京市</li>
  <li>杭州市</li>
  <li>长沙市</li>
  <li>沈阳市</li>
  <li>成都市</li>
  <li>合肥市</li>
  <li>天津市</li>
  <li>西安市</li>
</ul>
<script>
  // const p = document.getElementById('p');
  // const textContent = p.textContent;
  // const arrIndex = textContent.match(/1\d{10}/g).map(tel => textContent.indexOf(tel));
  // const arrRange = arrIndex.map(start => {
  //   const range = new Range()
  //   range.setStart(p.firstChild, start + 3)
  //   range.setEnd(p.firstChild, start + 7)
  //   return range
  // })
  // const highlight = new Highlight(...arrRange.flat())
  // CSS.highlights.set("tel-highlight", highlight);
  // console.log(highlight)
  const p = document.getElementById('p');
  const textContent = p.textContent;
  const pattern = /1\d{10}/g;

  // Replace matches with highlighted spans
  const highlightedText = textContent.replace(pattern, match => `<span class="tel-highlight">${match}</span>`);

  // Set the new HTML content
  p.innerHTML = highlightedText;
</script>
</body>
</html>